<template>
  <svg :class="className" v-bind="$attrs" aria-hidden="true">
    <use :href="svgIcon" />
  </svg>
</template>

<script>
import {computed } from 'vue'
import "./svgIcon.css"
export default {
  name: "SvgIcon",
  props:{
    icon:String,
    class:String,
  },
  setup(props) {
    //icon目录下的所有svg文件
    const req = require.context('@/assets/icons',false,/\.svg$/);
    //解析
    const requireAll = (requireContext) =>{
        return requireContext.keys().map(requireContext);
    }
    requireAll(req)
    const className = computed(() => {
      if (props.class) {
        return `svg-icon ${props.class}`;
      } else {
        return "svg-icon";
      }
    });
    const svgIcon = computed(()=>{
      return `#icon-${props.icon}`
    })
    return {
      svgIcon,className
    }
  },
}
</script>